<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/jsps/tag.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
<%@ include file="/WEB-INF/jsps/common_css.jsp"%>
<%@ include file="/WEB-INF/jsps/common_js.jsp"%>

<script type="text/javascript">

	//格式化单元格提示信息  
	function formatCellTooltip(value,row,index){
		var temp = "";
		if(value != undefined && value!=null){
			temp = value.join(',');
			if(temp.length>20){
				temp = temp.substring(0,20)+"...";
			}
		}
	    return "<span title='" + value + "'>" + temp + "</span>";  
	}  
	
</script>
</head>
<body>
	<table id="role_list_id" style="width:100%;height:100%;"
		data-options="fitColumns:true,singleSelect:true,pagination:true,pagePosition:'bottom'">   
	    <thead>   
	        <tr>   
	            <th data-options="field:'id',width:20">id</th>   
	            <th data-options="field:'name',width:20" title="name">角色名称</th>
	            <th data-options="field:'resourceNames',width:40,formatter:formatCellTooltip">拥有资源</th>
	            <th data-options="field:'menuNames',width:40,formatter:formatCellTooltip">拥有菜单</th>
              	<th data-options="field:'description',width:40">描述</th>
	        </tr>   
	    </thead>   
	</table>
	
	<!-- 数据表格toolbar -->
	<div id="role_toolbar_id">
		<a id="role_add_id" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增 </a>
		<a id="role_update_id" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
		<a id="role_delete_id" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
	</div>
	
	<!-- 编辑对话框 -->
	<div id="role_edit_id" class="easyui-dialog" title="角色管理" style="width:700px;height:525px"
        data-options="iconCls:'icon-save',modal:true,closed:true,buttons:'#role_edit_dialog_buttons_id'">   
   		<form id="role_form_id" method="post">
   			<input id="id"  type="hidden" name="id"/>
   			<table>
   				<tr>
   					<td>
   						<div>   
					                   名称:
				        	<input id="role_name_id" name="name"  class="easyui-validatebox"  data-options="required:true" /> 
					    </div>
   					</td>
   				</tr>
   				<tr>
   					<td>
   						<div>   
					      	 菜单:  
					          <input id="role_menus_id" class="easyui-combobox" name="roleMenuIds"   
    								data-options="valueField:'id',textField:'name',required:true,
    									url:'${baseurl}menu/findAll',editable:false,multiple:true" style="width:620px"/> 
					    </div> 
   					</td>
   				</tr>
   				<tr>
   					<td>
   						<div>   
					       	 描述: 
					          <input id="role_description_id" class="easyui-validatebox" name="description"   
    								data-options="" style="width:615px"/> 
					    </div> 
   					</td>
   				</tr>
   			</table>
   			
   					<!-- 角色拥有的菜单 starut -->
   					<div>
   						<div class="easyui-layout" data-options="fit:true,border:false" style="height:375px">  
						    <div data-options="region:'west',split:false,title:'拥有的权限',collapsible:false" style="width:300px;">  
						        <table id="hasAttrDataGrid" data-options="fit:true,border:false"></table>  
						    </div>  
						          
						    <div data-options="region:'center'" style="padding-top:150px; padding-left:12px;">  
						        <a href="javascript:void(0)" class="easyui-linkbutton c1" style="width:60px; margin-bottom:20px;" onclick="moveIn()">《 移入</a>  
						        <a href="javascript:void(0)" class="easyui-linkbutton c5" style="width:60px" onclick="moveOut()">移出 》</a>  
						    </div>  
						      
						    <div data-options="region:'east',split:false,title:'未拥有的权限',collapsible:false" style="width:300px;">  
						        <table id="noAttrDataGrid" data-options="fit:true,border:false"></table>  
						    </div>  
						</div>
					</div>
					<!-- 角色拥有的菜单 end -->
					  
		</form>
	</div>
	
	<!-- 编辑对话框的buttons -->
	<div id="role_edit_dialog_buttons_id">
		<a id="role_edit_dialog_buttons_ok_id" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a>
		<a id="role_edit_dialog_buttons_cancel_id" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">关闭</a>
	</div>

	<!-- 加载中显示样式,防止打开页面瞬间easyUI组件还没初始化完毕,显示布局乱问题 -->
	<div id='Loading' style="position: absolute; z-index: 1000; top: 0px; left: 0px;
    	width: 100%; height: 100%; background: #f3f8ff; text-align: center;">
		<h1 style="top: 48%; position: relative;">
			<font color="#15428B">加载中···</font>
		</h1>
	</div>


	<script type="text/javascript">
    var hasAttrDataGrid;  
    var noAttrDataGrid;  
    $(function() {
        hasAttrDataGrid = $('#hasAttrDataGrid').datagrid({  
            url : "${baseurl}role/findResourcesByRoleId", 
            fitColumns:true,
            singleSelect:true,
            pagination:true,
            pagePosition:'bottom',
            pageList:[30,60,90],
            pageSize:30,
            idField:"id",
            columns:[[    
                      {field:'id',title:'id',width:20,align:'center'},    
                      {field:'name',title:'资源名',width:100,align:'center'},    
                      {field:'uri',title:'uri',width:100,align:'center'}    
                  ]]    
        });  
          
        noAttrDataGrid = $('#noAttrDataGrid').datagrid({  
            url : "${baseurl}role/findResourcesByRoleIdNegation",
            fitColumns:true,
            singleSelect:true,
            pagination:true,
            pagePosition:'bottom',
            pageList:[30,60,90],
            pageSize:30,
            idField:"id",
            columns:[[    
                      {field:'id',title:'id',width:20,align:'center'},    
                      {field:'name',title:'资源名',width:100,align:'center'},    
                      {field:'uri',title:'uri',width:100,align:'center'}    
                  ]]    
        }); 
          
    });  
     
    //移入权限资源
    function moveIn(){
    	var roleselected =  $("#role_list_id").datagrid("getSelected");
        var selected = $('#noAttrDataGrid').datagrid('getSelected');  
        if(selected == null){  
            $.messager.alert('警告','请选择要移入的资源');  
            return;  
        }  
        
      	//删除选中行
        var resourceId = selected.id;
        var rowIndex = $('#noAttrDataGrid').datagrid('getRowIndex',resourceId);
        $('#noAttrDataGrid').datagrid('deleteRow', rowIndex);  
        var rows = $('#noAttrDataGrid').datagrid("getRows");
        $('#noAttrDataGrid').datagrid("loadData", rows);
        
        
     // 在第二行的位置插入一个新行
        $('#hasAttrDataGrid').datagrid('insertRow',{index:0,// 索引从0开始
        	row:selected
        });


   	} 
    
    //移除资源权限
    function moveOut(){
    	var roleselected =  $("#role_list_id").datagrid("getSelected");
        var selected = $('#hasAttrDataGrid').datagrid('getSelected');  
        if(selected == null){  
            $.messager.alert('警告','请选择要移出的资源');  
            return;  
        }
        
    	//删除选中行
        var resourceId = selected.id;
        var rowIndex = $('#hasAttrDataGrid').datagrid('getRowIndex',resourceId);
        $('#hasAttrDataGrid').datagrid('deleteRow', rowIndex);  
        var rows = $('#hasAttrDataGrid').datagrid("getRows");
        $('#hasAttrDataGrid').datagrid("loadData", rows);
        
        
     	// 在第二行的位置插入一个新行
        $('#noAttrDataGrid').datagrid('insertRow',{index:0,// 索引从0开始
        	row:selected
        });
          
    }
    
    
    $(function(){
    	
    	$('#role_list_id').datagrid({    
    	    url:'${baseurl}role/list',
    	    toolbar:"#role_toolbar_id"
    	});
    	
    	
    	//新增
    	$("#role_add_id").click(function(){
    		$('#role_form_id').form("clear");
    		//加载为拥有的权限
			noAttrDataGrid = $('#noAttrDataGrid').datagrid('reload',{"roleId":null});
			//加载拥有的权限
			hasAttrDataGrid = $('#hasAttrDataGrid').datagrid('reload',{"roleId":null});
    		$("#role_edit_id").dialog("open");
    	});
    	
    	//取消
    	$("#role_edit_dialog_buttons_cancel_id").click(function(){
    		//清空
    		$("#role_menus_id").combobox("clear");
    		$("#role_edit_id").dialog("close");
    		$('#role_form_id').form("clear");
    	});
    	

     	//提交表单
    	$("#role_edit_dialog_buttons_ok_id").click(function(){
    		if(!$('#role_form_id').form("validate")){
    			return;
    		}
    		
    		var id = $("#id").val();
    		var name = $("#role_name_id").val();
    		var menuIds = $("#role_menus_id").combobox("getValues");
    		var description = $("#role_description_id").val();
    		
    		//获取选中的资源权限
    		var rows =  $('#hasAttrDataGrid').datagrid('getRows');
//     		var resourcesStr = JSON.stringify(rows);
//     		alert("id===>"+id+"   name===>"+name+"  menuIds===>"+menuIds+"  discription==>"+discription);
			var rowIds = new Array();
			
			if(rows == "" || rows == null){
				$.messager.alert('警告','角色权限不能为空!');   
				return;
			}
			for(var i=0;i<rows.length;i++){
				rowIds.push(rows[i].id);
			}
			
    		$.post("${baseurl}role/saveOrUpdate", { "id":id,"name":name,"description":description,"menuIds":menuIds.join(","),"resourcesIds":rowIds.join(",")},
    			 function(data){
    			  if(data.success){
    				  	$("#role_menus_id").combobox("clear");
    		        	$('#role_list_id').datagrid("reload");
    		        	$('#role_form_id').form("clear");
    		        	$.messager.show({title:'系统提示',msg:data.content,timeout:5000,showType:'slide'});
    		        }
    			    $("#role_edit_id").dialog("close");
    			    $.messager.show({title:'操作失败',msg:data.content,timeout:5000,showType:'slide'});
    			  }
    			 ,"json"); 
    	});
    	
    	
    	//删除
    	$("#role_delete_id").click(function(){
    		var selected =  $("#role_list_id").datagrid("getSelected");
    		if(selected == null){
    			alert("请选中你要删除的记录.");
    		}else{
    			$.post("${baseurl}role/delete", { "id":selected.id},
    					   function(data){
    					    	if(data.success){
    					    		$('#role_list_id').datagrid("reload");
    					    		$.messager.show({title:'系统提示',msg:data.content,timeout:5000,showType:'slide'});
    					    	}else{
    					    		$('#role_form_id').form("clear");
    					    		$.messager.alert('警告',data.content); 
    					    	}
    					   }, "json");
    		}
    	});
    	
    	
    	//修改
    	$("#role_update_id").click(function(){
    		var selected =  $("#role_list_id").datagrid("getSelected");
    		if(selected == null){
    			alert("请选中你要修改的记录.");
    		}else{
    			//加载为拥有的权限
    			noAttrDataGrid = $('#noAttrDataGrid').datagrid('load',{"roleId":selected.id});
    			//加载拥有的权限
    			hasAttrDataGrid = $('#hasAttrDataGrid').datagrid('load',{"roleId":selected.id});
    			
    			//选中拥有的菜单
    			$("#role_menus_id").combobox("setValue",selected.menuIds);
    			//排除选中的一级菜单,后台对一级菜单单独处理
    			$("#role_menus_id").combobox("unselect",1);
    			
    			$('#role_form_id').form("load","${baseurl}role/get?id="+selected.id);
    			$("#id").val(selected.id);
    			$("#role_edit_id").dialog("open");
    		}
    	});
    	
    	
    	
    });



    // 加载中显示样式,防止打开页面瞬间easyUI组件还没初始化完毕,显示布局乱问题 ==== start===
    function closes() {
        $("#Loading").fadeOut("normal", function () {
            $(this).remove();
        });
    }

    var pc;
    $.parser.onComplete = function () {
        if (pc) clearTimeout(pc);
        pc = setTimeout(closes, 0);
    }
    // 加载中显示样式,防止打开页面瞬间easyUI组件还没初始化完毕,显示布局乱问题 ==== end===
</script>
 
</body>
</html>